<template>
  <div class="dashboard-container">
    <div class="welcome-info">
      <h2>欢迎您，{{ name }}</h2>
      <p>{{ welcomeTime }}，祝您工作愉快！</p>
    </div>
    
    <el-row :gutter="20" class="panel-group">
      <el-col :span="6">
        <div class="card total-users">
          <div class="card-body">
            <div class="card-title">
              <i class="el-icon-user"></i>
              <span>用户总数</span>
            </div>
            <div class="card-value">8,846</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card total-scenic">
          <div class="card-body">
            <div class="card-title">
              <i class="el-icon-picture"></i>
              <span>景点总数</span>
            </div>
            <div class="card-value">112</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card total-hotels">
          <div class="card-body">
            <div class="card-title">
              <i class="el-icon-house"></i>
              <span>酒店总数</span>
            </div>
            <div class="card-value">93</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card total-restaurants">
          <div class="card-body">
            <div class="card-title">
              <i class="el-icon-dish"></i>
              <span>餐厅总数</span>
            </div>
            <div class="card-value">76</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ]),
    welcomeTime() {
      const hour = new Date().getHours()
      if (hour < 6) return '凌晨好'
      if (hour < 9) return '早上好'
      if (hour < 12) return '上午好'
      if (hour < 14) return '中午好'
      if (hour < 17) return '下午好'
      if (hour < 19) return '傍晚好'
      if (hour < 22) return '晚上好'
      return '夜里好'
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .welcome-info {
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 16px;
      color: #606266;
    }
  }
  
  .panel-group {
    .card {
      height: 108px;
      background: #fff;
      border-radius: 4px;
      position: relative;
      margin-bottom: 20px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
      
      .card-body {
        padding: 20px;
        
        .card-title {
          font-size: 16px;
          color: #909399;
          
          i {
            font-size: 20px;
            margin-right: 8px;
          }
        }
        
        .card-value {
          font-size: 28px;
          font-weight: bold;
          color: #303133;
          margin-top: 10px;
        }
      }
    }
    
    .total-users {
      background: linear-gradient(to right, #36D1DC, #5B86E5);
      .card-title, .card-value {
        color: #fff;
      }
    }
    
    .total-scenic {
      background: linear-gradient(to right, #FF9966, #FF5E62);
      .card-title, .card-value {
        color: #fff;
      }
    }
    
    .total-hotels {
      background: linear-gradient(to right, #56CCF2, #2F80ED);
      .card-title, .card-value {
        color: #fff;
      }
    }
    
    .total-restaurants {
      background: linear-gradient(to right, #11998e, #38ef7d);
      .card-title, .card-value {
        color: #fff;
      }
    }
  }
}
</style> 